<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../lib/angularjs/angular1.6.3.min.js"></script>
</head>
<body>
<div ng-app="Demo">
    <div ng-controller="testCtrl as ctrl">
        <input name="name" ng-model="ctrl.text" /><input name="name" ng-model="ctrl.name" />{{ctrl.value}}<b>--></b>{{ctrl.name}}
    </div>

    <div ng-controller="MyController">
        <input ng-model="myName" type="text" placeholder="Type Your Name">
        <textarea ng-model="myTextarea" cols="30" rows="10"></textarea>
        <div ng-bind="interpolatedValue"></div>
    </div>
</div>
<div ng-app="demo2" id="demo2">
    <div ng-controller="ctrl03">
        $name$<br/>{{1+2}}<br/>{{name}}
    </div>
</div>
<script>
    (function(){
        var app=angular.module('Demo', []).
        controller('testCtrl',["$interpolate","$scope",testCtrl]).
        controller("MyController",["$interpolate","$scope",ctrl2]).
        controller("ctrl03",["$interpolate","$scope","$interpolateProvider",ctrl3]);
        function testCtrl($interpolate,$scope) {
            var vm = this;
            var obj = { value: "Hello" ,name:"1232"};
            vm.text = "World";
            $scope.$watch("ctrl.text",function(n,o){
                var interpolate = $interpolate("{{value}} " + n +"{{name}}");
                vm.value = interpolate(obj);
            });
        }
        function ctrl2($interpolate,$scope){
            $scope.myName="myName";
            $scope.myTextarea="Hello myTextarea";
            $scope.$watch("myTextarea", function(newVal, oldVal, scope){
                var interpolatedFunc = $interpolate(newVal);
                //(1)
                $scope.interpolatedValue = interpolatedFunc({myName: $scope.myName});
                //(2)
                //$scope.interpolatedValue = interpolatedFunc(scope);
            });

        }
        function ctrl3($interpolate,$scope,$interpolateProvider) {
            $interpolateProvider.startSymbol('$');
            $interpolateProvider.endSymbol('$');
            $scope.hello="Hello Word";
        }
        var app2=angular.module("demo2",[]);
        app2.config(['$interpolateProvider', function ($interpolateProvider) {
                $interpolateProvider.startSymbol('$');
                $interpolateProvider.endSymbol('$');
            }])
        app2.controller("ctrl03",function ($scope) {
            $scope.name="Hello";
        })
        angular.bootstrap(document.getElementById("demo2"),['demo2']);
    }());
</script>
</body>
</html>